<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.status.cu === 0 && crud.optPageShow.listPage">
        <div slot="header" class="clearfix">
          <span>调度服务列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission"/>
        </div>
        <!--表格渲染-->
        <el-table border stripe ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
                  @select="crud.selectChange" @select-all="crud.selectAllChange"
                  @selection-change="crud.selectionChangeHandler"
                  @filter-change="crud.handleFilterChange" @row-dblclick="toDetail"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column type="selection"/>
          <el-table-column v-if="columns.visible('agentHaStatus')" :show-overflow-tooltip="true" align="center"
                           prop="agentHaStatus"
                           label="HA" min-width="25">
            <template slot-scope="scope">
              <i :class="getHaStatusIcon(scope.row.agentHaStatus)" style="font-size: 16px;margin-right:5px"/>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('agentCode')" prop="agentCode" label="服务编码"/>
          <el-table-column v-if="columns.visible('agentName')" prop="agentName" label="服务名称"/>
          <el-table-column v-if="columns.visible('agentIp')" :show-overflow-tooltip="true" prop="agentIp" label="服务主机"/>
          <el-table-column v-if="columns.visible('agentPort')" prop="agentPort" label="服务端口"/>
          <el-table-column v-if="columns.visible('serverVer')" prop="serverVer" label="服务版本"/>
          <el-table-column v-if="columns.visible('agentStatus')" :show-overflow-tooltip="true" label="服务状态"
                           prop="agentStatus"
                           key="agentStatus"
                           :filters="[{ text: '未发布', value: '0' },{ text: '正常', value: '1' }, { text: '停用', value: '2' }, { text: '发布失败', value: '3' }]"
                           :filter-method="filterAgentStatus"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="agentStatus">
            <template slot-scope="scope">
              <el-tag size="small" v-if="scope.row.agentStatus=='0'" align="center" type="info"
                      style="width:60px;">未发布
              </el-tag>
              <el-tag size="small" v-if="scope.row.agentStatus=='1'" align="center" type="success"
                      style="width:60px;">正常
              </el-tag>
              <el-tag size="small" v-if="scope.row.agentStatus=='2'" align="center" type="warning"
                      style="width:60px;">停用
              </el-tag>
              <el-tag size="small" v-if="scope.row.agentStatus=='3'" align="center" type="error"
                      style="width:60px;">发布失败
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('lastReceveTime')" prop="lastReceveTime" :show-overflow-tooltip="true"
                           label="最新心跳时间" min-width="140">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.lastReceveTime }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('upUser')" prop="upUser" label="修改人"/>
          <el-table-column v-if="columns.visible('upTs')" prop="upTs" :show-overflow-tooltip="true"
                           label="最后修改时间" min-width="140">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.upTs }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <add-form v-if="crud.status.add > 0"/>
      <edit-from v-if="crud.status.edit > 0"/>
      <detail v-if="crud.optPageShow.detailPage" :agentInfo="agentInfo"/>
    </div>
  </div>
</template>
<script>
import nodeServer from '@/api/system/node'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/agent/dispatch/admin/CRUD.operation'
import addForm from './addForm'
import editFrom from './editForm'
import detail from './detail'

//默认去查询
const queryList = [
  {'cloumValue': 'agentCode', 'cloumName': '服务编码'},
  {'cloumValue': 'agentName', 'cloumName': '服务名称'},
  {'cloumValue': 'agentIp', 'cloumName': '服务主机'}
]
const defaultCrud = CRUD({
  title: '调度服务管理',
  url: '/api/agentDef/selectPages',
  queryList: queryList,
  sort: 'sort,asc',
  crudMethod: {...nodeServer}
})
const defaultForm = {}
export default {
  name: 'dispatch',
  components: { crudOperation, addForm, editFrom, detail},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['ha_status_icon'],
  data() {
    return {
      agentInfo: {},
      permission: {
        add: ['dispatch:add'],
        edit: ['dispatch:edit'],
        del: ['dispatch:del'],
        install: ['dispatch:install'],
        start: ['dispatch:start'],
        stop: ['dispatch:stop'],
        restart: ['dispatch:restart']
      },
    }
  },
  computed: {},
  created() {
    this.crud.goBack();
  },
  methods: {
    filterAgentStatus(value, row) {
      return row.agentStatus === value;
    },
    filterAgentHaStatus(value, row) {
      return row.agentHaStatus === value;
    },
    toDetail(row, column, event) {
      this.agentInfo = row;
      this.crud.toDetail();
    },
    getHaStatusIcon(val) {
      return this.dict.label.ha_status_icon[val]
    }
  }
}
</script>
<style scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;
}

.form-operator-button {
  padding: 10px;
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 44px;
  text-align: center;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hs_status_type_success {
  color: #42800d;
}

.hs_status_type_default {
  color: #6d6f6c !important;
}

.hs_status_type_error {
  color: #ea0831;
}
</style>
